<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CMS首页</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/index.css">
</head>
<body>

	<div class="container">
		<!-- 表头 -->
		<div>
			<!-- 图片 -->
			<a href="${pageContext.request.contextPath }/"> <img alt="" src="${pageContext.request.contextPath }/resource/pic/logo-admin.jpg"
				height="50" width="100"></a>
			<div class="float-right align-items-center">
				<!-- 右侧的个人中心和退出按钮 -->
				<!-- 如果已经登录，则显示个人中心和退出 -->
				<c:if test="${LOGIN_USER!=null }">
                                 你好，<b>${LOGIN_USER.nickname  }</b>
					<input class="btn btn-primary  btn-sm" type="button"
						onclick="toCenter()" value="${LOGIN_USER.role==0?'个人中心':'管理员中心' }">
					<input class="btn btn-primary  btn-sm" type="button"
						onclick="logout()" value="退出">
				</c:if>

				<!-- 如果没有登录，则显示登录和注册按钮  -->
				<c:if test="${LOGIN_USER==null }">
					<input class="btn btn-primary  btn-sm" type="button"
						onclick="toLogin()" value="登录">
					<input class="btn btn-primary  btn-sm" type="button"
						onclick="toReg()" value="注册">
				</c:if>
			</div>
			<hr>
		</div>

		<!-- 正文 -->
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8">
				<h3>
					<b>${article.title }</b>
				</h3>
				<p>
					作者：${article.userName } 发布时间：
					<fmt:formatDate value="${article.created }"
						pattern="yyyy-MM-dd  HH:mm:ss" />
					<span id="coll"></span> <input type="hidden" id="collectId">
				</p>
				<hr>
				${article.content }
				<hr>

				<div>
					<form action="" id="comment">
						<input type="hidden" value="${article.id }" name="articleId">
						文章评论：
						<textarea rows="5" cols="100" name="content"></textarea>
					</form>

					<c:if test="${sessionScope.LOGIN_USER!=null }">
						<input type="button" onclick="addComments()" value="提交评论"
							class="btn btn-info">
					</c:if>
					<c:if test="${sessionScope.LOGIN_USER==null }">
						<span class="text-danger">请登录后再评论</a></span>
					</c:if>
				</div>
				<hr>
				<!-- 显示评论 -->
				<div>
					<c:forEach items="${info.list}" var="comment">
						<p>${comment.username}·<fmt:formatDate
								value="${comment.created}" pattern="yyyy-MM-dd HH:mm:ss" />
						</p>
						<p>${comment.content }</p>
						<hr>
					</c:forEach>
					<!-- 评论分页 -->
					<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
				</div>

			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

	//去个人中心
    function toCenter(){
          //获取角色role值
          var role = '${LOGIN_USER.role}';
          
          //判断role值
          if(role == 0){
               //普通用户
               location="${pageContext.request.contextPath }/my/";
          }else{
               //超级管理员
               location="${pageContext.request.contextPath }/admin/";
          }
    }
    
    //退出登录
    function logout(){
          location="${pageContext.request.contextPath }/user/logout";
    }
    
    //添加评论
    function addComments(){
          $.post(
               "${pageContext.request.contextPath }/addComments",
               $("#comment").serialize(),
               function(result){
                     if(result){
                          //刷新当前页面
                          window.location.reload();
                     }else{
                          alert("评论失败，请重新登录");
                     }
               }
          )
    }
    
    //分页参数
    function goPage(pageNum){
          location="${pageContext.request.contextPath }/detail?pageNum="+pageNum  +"&articleId="+'${article.id}';
    }
    
    //登录
    function toLogin(){
          location="${pageContext.request.contextPath }/user/toLogin";
    }
    //注册
    function toReg(){
          location="${pageContext.request.contextPath }/user/toRegister";
    }
    
    // 修改文章点击量（预加载函数）
    $(function(){
        //文章点击量
        var id=${article.id};
        $.post(
             "${pageContext.request.contextPath }/addHit",
             {id:id},
             function(){
            	 
             }
        )
        //获取当前用户
        var user = '${LOGIN_USER}';
        if(user != null && user != ''){
             //设置收藏
                   $.post(
                        "${pageContext.request.contextPath }/my/getCollectByArticleId",
                        {articleId:id},
                        function(col){
                              if(col != null && col!=''){
                                   //如果已经收藏
                                   $("#collectId").val(col.id);
                                   $("#coll").html("<input  type='button' id='collect' value='★已收藏'  class='btn  btn-success btn-sm' onclick='delCollect()'>");
        
                              }else{
                                   //如果没有收藏
                                   $("#coll").html("<input  type='button' id='collect' value='☆收藏'  class='btn btn-warning  btn-sm' onclick='addCollect()'>");
                                   
                              }
                        }
                   )
             }
  })
    
    
    //添加收藏
    function addCollect(){
          
          var articleId = "${article.id}";
          var text = "${article.title}";
          
          $.post(
               "${pageContext.request.contextPath }/my/addCollect",
               {articleId:articleId,text:text},
               function(col){
                     
                     if(col != null && col!=''){
                          $("#collectId").val(col.id);
                          //如果已经收藏
                          $("#coll").html("<input type='button'  id='collect' value='★已收藏'  class='btn btn-success btn-sm'  onclick='delCollect()'>");
    
                     }else{
                          alert("收藏失败！");                              
                     }
                     
                     
               }
          )
    }
    //取消收藏
    function delCollect(){
          
          var id = $("#collectId").val();
          $.post(
               "${pageContext.request.contextPath }/my/delCollect",
               {id:id},
               function(result){
                     if(result){
                          $("#coll").html("<input type='button'  id='collect' value='☆收藏'  class='btn btn-warning btn-sm'  onclick='addCollect()'>");
                     }else{
                          
                          alert("取消收藏失败！");
                     }
               }
          )
    }
</script>

</html>